@charset "utf-8";
html,body{
  width: 100%;
  max-width: 640px;
  height: 100%;
  min-height: 100%;
  position: static;
  overflow: auto;
  margin:0 auto;
  background-size: $green;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
  font-size: 12px;
  &.full-por{
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    .containor{
      height: 100%;
    }
  }
  &.scroll-auto{
    overflow: auto;
  }
}
.animated{
-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;
  &.infinite{
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
  }
}
.containor{
  width: 100%;
  min-height: 100%;
}
.mod_nav{
  height: 3rem;
  line-height: 3rem;
  background: #517521 url(#{$cupPath}/topnav.jpg) repeat-x left top;
  background-size: contain;
  text-align: center;
  color:#fff;
  font-size: 18px;
  position: relative;
  @include box-shadow(2px 4px 10px rgba(60,85,19,.75));
  .back-links,.r-links{
    position: absolute;
  }
  .r-links{
    right:0;
    top:0;
  }
  .back-links{
    left:0;
    top:0;
  }
}
.back-links{
  display: inline-block;
  width: 3rem;
  height: 3rem;
  color:#fff;
  border-right: 1px solid #37550e;
  @include no_td;
  &:hover{
    color:#fff;
  }
  .in{
    display: block;
    border-right: 1px solid #8fc14b;
  }
}
.r-links{
  @extend .back-links;
  left:auto !important;
  right: 0;
  color:#fff;
  border-left: 1px solid #8fc14b;
  .in{
    border-left: 1px solid #37550e;
  }
}
.mod_avg{
  @include clearfix;
  background-color: #db0126;
  @include box-shadow(0 0 10px rgba(4,0,0,.75));
  li{
    float: left;
    width: 50%;
    line-height: 3rem;
    height: 3rem;
    text-align: center;
    color:$gray;
    a{
      display: block;
      @include no_td;
    }
  }
}
.mod_three{
  @extend .mod_avg;
  li{
    width:33.33%;
  }
}
.mod_menu{
  background-color: #fff;
  a{
    color:#333;
  }
  .current a{
    background-color: lighten($green,5%);
    color:#fff;
  }
}
.bg-basic{
  background:$green url(#{$cupPath}/pbg.jpg) repeat-y center bottom;
  background-size: 100% auto;
}
.bg-index{
  background:url(#{$cupPath}/indexbg.jpg) no-repeat left top;
  background-size:100% auto;
}
.p-base{
  padding: $baseCupPadding;
}
/*tab 组件*/
.mod_tab{
  .tab-bd{
    display: none;
  }
}
/*table ui*/
table{
  &.table-big{
    th,td{
      padding:10px;
    }
  }
  &.table-radius{
    $table-radius:12px !default;
    border-radius: $table-radius;
    thead th:first-child{
      @include border-radius($table-radius 0 0 0);
    }
    thead th:last-child{
      @include border-radius(0 $table-radius 0 0);
    }
    tbody tr:last-child td:first-child{
      @include border-radius(0 0 0 $table-radius);
    }
    tbody tr:last-child td:last-child{
      @include border-radius(0 0 $table-radius 0);
    }
  }
  &.table-tac{
    th,td{
      text-align: center;
    }
  }
  &.table-striped{
    tbody tr:nth-of-type(2n) td{
      background-color: #eeeeee;
    }
  }
}
.table-red{
  background-color: #fff;
  thead{
    th{
      color:#fff;
      background-color: #7e0d1d;
    }
  }
}
/*bar ui*/
.bar{
  height: 0.8rem;
  position: relative;
  display: block;
  overflow: hidden;
  background-color: $gray-lighter;
  .in{
    width: 100%;
    position: absolute;
    left:0;
    top:0;
    height: 0.8rem;
  }
  &.bar-red{
    .in{
      background-color: $redCupDark;
    }
  }
}
/*p ui*/
.base-text{
  padding:12px 0;
  line-height: 2rem;
}
.des-title{
  font-size: 14px;
  color:#fff;
  margin-bottom: 12px;
  padding-left: 1.2rem;
}
/*map circle*/
.avg-four{
  @include clearfix;
  li{
    float: left;
    width: 25%;
    text-align: center;
  }
}
/*------------国旗 ui--------*/
.map-parent{
  @include no_td;
  margin:5px 0;
  display: block;
}
.map{
  .text{
    line-height: 2rem;
    padding:0.2rem 0;
    display: block;
    color:#fff;
  }
}
.map-circle{
  height: 3.5rem;
  width: 3.5rem;
  display: block;
  margin:0 auto;
  border:2px solid #fff;
  @include border-radius(100%);
  background-color: #db0125;
  @include transition(all 0.3s);
  @include backface-visibility(hidden);
  /*------map country------------*/
  &.blz{
    background:#fff url(#{$cupPath}/blz.png);
    background-size: contain;
  }
  &.bh{
    background:#fff url(#{$cupPath}/bh.png);
    background-size: contain;
  }
  &.bx{
    background:#fff url(#{$cupPath}/bx.png);
    background-size: contain;
  }
  &.dg{
    background:#fff url(#{$cupPath}/dg.png);
    background-size: contain;
  }
  &.els{
    background:#fff url(#{$cupPath}/els.png);
    background-size: contain;
  }
  &.egde{
    background:#fff url(#{$cupPath}/egde.png);
    background-size: contain;
  }
  &.fg{
    background:#fff url(#{$cupPath}/fg.png);
    background-size: contain;
  }
  &.grby{
    background:#fff url(#{$cupPath}/grby.png);
    background-size: contain;
  }
  &.gzdlj{
    background:#fff url(#{$cupPath}/gzdlj.png);
    background-size: contain;
  }
  &.hg{
    background:#fff url(#{$cupPath}/hg.png);
    background-size: contain;
  }
  &.hr{
    background:#fff url(#{$cupPath}/hr.png);
    background-size: contain;
  }
  &.hdls{
    background:#fff url(#{$cupPath}/hdls.png);
    background-size: contain;
  }
  &.jn{
    background:#fff url(#{$cupPath}/jn.png);
    background-size: contain;
  }
  &.kmr{
    background:#fff url(#{$cupPath}/kmr.png);
    background-size: contain;
  }
  &.ktdw{
    background:#fff url(#{$cupPath}/ktdw.png);
    background-size: contain;
  }
  &.kldy{
    background:#fff url(#{$cupPath}/kldy.png);
    background-size: contain;
  }
  &.mg{
    background:#fff url(#{$cupPath}/mg.png);
    background-size: contain;
  }
  &.mxg{
    background:#fff url(#{$cupPath}/mxg.png);
    background-size: contain;
  }
  &.nrly{
    background:#fff url(#{$cupPath}/nrly.png);
    background-size: contain;
  }
  &.pty{
    background:#fff url(#{$cupPath}/pty.png);
    background-size: contain;
  }
  &.rb{
    background:#fff url(#{$cupPath}/rb.png);
    background-size: contain;
  }
  &.rs{
    background:#fff url(#{$cupPath}/rs.png);
    background-size: contain;
  }
  &.wlg{
    background:#fff url(#{$cupPath}/wlg.png);
    background-size: contain;
  }
  &.xby{
    background:#fff url(#{$cupPath}/xby.png);
    background-size: contain;
  }
  &.xl{
    background:#fff url(#{$cupPath}/xl.png);
    background-size: contain;
  }
  &.yl{
    background:#fff url(#{$cupPath}/yl.png);
    background-size: contain;
  }
  &.ydl{
    background:#fff url(#{$cupPath}/ydl.png);
    background-size: contain;
  }
  &.ygl{
    background:#fff url(#{$cupPath}/ygl.png);
    background-size: contain;
  }
  &.zl{
    background:#fff url(#{$cupPath}/zl.png);
    background-size: contain;
  }
  &.aejly{
    background:#fff url(#{$cupPath}/aejly.png);
    background-size: contain;
  }
  &.agt{
    background:#fff url(#{$cupPath}/agt.png);
    background-size: contain;
  }
  &.adly{
    background:#fff url(#{$cupPath}/adly.png);
    background-size: contain;
  }
  &.adly{
    background:#fff url(#{$cupPath}/adly.png);
    background-size: contain;
  }
  &.other{
    background:#fff url(#{$cupPath}/other.png);
    background-size: contain;
  }

  &:hover{
    @include scale(1.2);
    @include box-shadow(0 0 8px rgba(255,255,255,0.1));
    text-decoration: none;
  }
}
/*buttons*/
.a-btn-white{
  display: inline-block;
  padding: 0.5rem;
  background-color: #fff;
  color:$red;
  @include no_td;
  [class*='club-']{
    font-size: 1.5rem;
    margin-right: 0.2rem;
    vertical-align: middle;
  }
  &:hover{
    color:$red;
  }
}
/*list li*/
.list-shot{
  li{
    padding:1rem;
    position: relative;
    color:#fff;
      border-bottom:1px solid #c20122;
      margin-bottom: 1px;
      &:nth-of-type(2n){
        background-color: $redDark;
      }
    &:hover{
      background-color:lighten($red,5%);
    }
  }
  .title{
    line-height: 2rem;
  }
  .subtitle{
    padding:5px 0;
  }
  .imgbox{
    width: 80px;
    float: left;
    border: 1px solid #fff;
    background-color: #fff;
    @include box-shadow(0 0 10px rgba(255,255,255,.68));
  }
  .bar{
    width: 100px;
  }
  .item-r{
    margin-left: 90px;
  }
  .a-btn-white{
    position: absolute;
    right:12px;
    top:12px;
  }
}
/*anim 区域*/
@keyframes anim-sun {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}
@-moz-keyframes anim-sun{
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}
@-webkit-keyframes anim-sun{
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}
///由大变小------
@keyframes anim-scale {
  0% {
    opacity: 0;
    transform:scale(1.5);
  }
  100% {
    opacity: 1;
    transform:scale(1);
  }
}
@-moz-keyframes anim-scale{
  0% {
    opacity: 0;
    -moz-transform:scale(1.5);
  }
  100% {
    opacity: 1;
    -moz-transform:scale(1);
  }
}
@-webkit-keyframes anim-scale{
  0% {
    opacity: 0;
    -webkit-transform:scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform:scale(1);
  }
}




//旋转动画-------------
@include keyframes(anim-rotate){
  0% {
    transform:rotate(0deg);
    box-shadow: 0 0 5px rgba(#000,0.3);
  }
  50%{
    transform:rotate(360deg);
  }
  80%{
    transform:rotate(-180deg) translateY(50%);
  }
  90%{
    transform:ranslateY(0);
  }
  100%{
      transform:rotate(-360deg);
      box-shadow: 0 0 10px rgba(#000,0.5);
  }
}
//anim-ball-run
@include keyframes(anim-ball-run){
  0% {
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

//anim-ball-跳到跳去的
@include keyframes(anim-ball-tada){
  0% {
    left:10%;
    top:0;
    @include rotate(0deg);
  }
  10%{
    left:0;
    top:20%;
    @include rotate(3600deg);
  }
  20%{
    left:20%;
    top:50%;
    @include rotate(7200deg);
  }
  30%{
    left:30%;
    top:40%;
    @include rotate(3600deg);
  }
  50%{
    left:80%;
    top:30%;
    @include rotate(7200deg);
  }
  70%{
    left:50%;
    @include rotate(1080deg);
  }
  80%{
    left:40%;
    top:0;
    @include rotate(0deg);
  }
  100%{
    @include rotate(3600deg);
  }
}




@include keyframes(anim-x-rotate){
  0% {
    transform:rotateX(0deg);
  }
  100%{
    transform:rotateX(360deg);
  }
}

/*icon*/
.icon-down{
  //@include triangle(bottom,4px,#fff);
  vertical-align:middle ;
  margin:0 6px;
  font-size:0;
  width:1rem;
  height:1rem;
  display:inline-block;
  background:url(#{$cupPath}/dr.png) repeat-x left top;
  background-size: contain;
}
.center{
  cursor: pointer;
}
.mod_match_footer{
  height: 4rem;
  background-color:$redCupDark ;
  position: fixed;
  width: 100%;
  left:0;
  bottom:0;
  line-height: 2rem;
  padding:1rem;
  text-align: center;
  color:#fff;
  @include box-sizing(border-box);
}
/*nmeu box*/
.group-menu{
  padding:10px 20px;
  background-color: rgba(0,0,0,0.8);
  position: absolute;
  width: 100%;
  z-index: 1001;
  left:0;
  top:40px;
  @include box-sizing(border-box);
  @include box-shadow(0 4px 3px rgba(0,0,0,0.2));
  .menulist{
    @include clearfix;
    li{
      $baseGutter:5%;
      float: left;
      margin-right: $baseGutter;
      width:calc2($baseGutter,3);
      margin-bottom: 0.5rem;
      padding:5px;
      line-height: 24px;
      border:1px solid $green;
      cursor: pointer;
      text-align: center;
      color:#fff;
      @include box-sizing(border-box);
      @include transition(all 0.3s);
      &:hover{
        background-color: lighten($green,10%);
        color:#fff;
      }
      &:nth-of-type(3n){
        margin-right: 0;
      }
      &.current{
        background-color: $green;
        color:#fff;
      }
    }
  }
}
.circle-list{
  [class*='club-']{
    display: block;
    font-size: 3.5rem;
    margin-top: 8px;
  }
  .circle-menu{
    @include border-radius(100%);
    @include background-clip(padding-box);
    background-color: rgba(0,0,0,.3);
    border:1px solid #fff;
    @include box-shadow(0 0 10px rgba(255,255,255,.075));
    display: inline-block;
    width: rem(80,12);
    height: rem(80,12);
    @include transition(all 0.3s linear);
    &:hover{
      @include scale(1.1);
      background-color: rgba(0, 0, 0, 0.6);
      border:1px solid rgba(0,0,0,0.3);
      @include box-shadow(0 0 10px rgba(255,255,255,.25));
    }
  }
}